<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <script type= "text/javascript"src="/js/jquery-3.3.1.min.js"></script>
    <script type= "text/javascript"src="/js/vue.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>

   <style>
    #box{
        width: 100%;
    }
    .title{
        background-color: darkseagreen;
        width: 100%;
        height: 50px;

    }
   </style>


</head>
<body>
    <h2 id="b1">这是一个标题</h2>
    <div id="box">
        <div class="title">
            <p>段落一。</p>
        </div>
        <div class="title">
            <p>段落二。</p>
        </div>
        <div id="getDate">

        </div>

        <div class="but">
            <button>点我</button>
        </div>
        <div class="butOne">
            <button>获得时间</button>
        </div>
    </div>

    <div id="app">
        <p>{{ message }}</p>
    </div>

    <script  type="text/javascript">
      $(function () {
          $(".title").click(function () {
              $(this).hide();
          });
        $(".but").click(function () {
            $(".title").show();
        });


        //定时请求
        setInterval(task,5000);



        function task(){
            $.ajax({
                url:"/getDate",
                type:"GET",
                success:function (reult) {
                     $("#b1").html(reult);
                  //  alert(reult)
                }
            });
        }
      });

      new Vue({
          el: '#app',
          data: {
              message: 'Hello Vue.js!'
          }
      })
    </script>



    <span class="glyphicon glyphicon-heart-empty" style="color: rgb(81, 81, 81); font-size: 18px;"> 点赞</span>

</body>
</html>